<template>
	<view>
		<u-field placeholder-style="color:#757575;font-size:14px !important;"  v-model="companyname" required label="公司名称" placeholder="请输入" :clearable="false" class="reset_after" />
		<u-field placeholder-style="color:#757575;font-size:14px !important;"  v-model="jobname" required name="jobs" label="职位名称" placeholder="请输入" :clearable="false" class="reset_after" />
		<view class="form-line u-border-bottom" @click="showPickerStartDate = !showPickerStartDate" >
			<view class="form-field">
				<view class="label">
					入职时间
				</view>
				<view :class="starttime ? 'text' : 'text ac'">
					{{starttime ? starttime : '点击选择入职时间'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		
		<u-picker 
			:params="dateParams" 
			v-model="showPickerStartDate" 
			:default-time="starttime" 
			mode="time" 
			title="选择入学时间" 
			:start-year="minDate"
			:end-year="maxDate" 
			@confirm="onConfirmStartDate" 
			@cancel="showPickerStartDate = false" 
		/>
		<view class="form-line u-border-bottom" @click="showPickerEndDate = !showPickerEndDate">
			<view class="form-field">
				<view class="label">
					离职时间
				</view>
				<view :class="endtimeName ? 'text' : 'text ac'">
					{{endtimeName ? endtimeName : '点击选择离职时间'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<u-select v-model="showPickerEndDate"
		mode="mutil-column-auto" 
		:list="columnsWage1" 
		@confirm="onConfirmWage1"></u-select>

		<u-field 
			required 
			disabled 
			label="工作职责" 
			class="reset_after no_border" 
		/>
		<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
		<view v-show="isDutyTextarea" @click="handleDutyTextarea" :class=" isDutyTextarea && duty == ''? 'textarea textarea-color' : 'textarea'" >
			{{duty ? duty : '简单描述一下你的工作职责'}}
		</view>
		<textarea 
			maxlength="-1" 
			v-show="!isDutyTextarea" 
			class="textarea2"
			:value="duty"
			:focus="isDutyFucus" 
			@blur="handleDutyTextarea" 
			@input="handleInput"
			placeholder="简单描述一下你的工作职责"
		>
		</textarea>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view v-if="isDutyTextarea" @click="handleDutyTextarea" :class=" isDutyTextarea && duty == ''? 'textarea textarea-color' : 'textarea'" >
			{{duty ? duty : '简单描述一下你的工作职责'}}
		</view>
		<textarea 
			maxlength="-1" 
			v-if="!isDutyTextarea" 
			class="textarea2"
			:value="duty"
			:focus="isDutyFucus" 
			@blur="handleDutyTextarea" 
			@input="handleInput"
			placeholder="简单描述一下你的工作职责"
		>
		</textarea>
		<!-- #endif -->
		<view style="margin: 32rpx 32rpx 0;">
			<u-button shape="circle" type="primary" :disabled="disabled" @click="handleSubmit">
				保存
			</u-button>
		</view>
		<view class="box_1" v-if="parseInt(id) > 0" @click="delWorksModalState=true">
			删除此条工作经历
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="delWorksModalState" title="提示" content="确定删除该条工作经历吗?" show-cancel-button
			@confirm="deleteCurrentWork" @cancel="delWorksModalState=false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'EditWorks',
		data() {
			return {
				isDutyFucus:false,
				isDutyTextarea:true,
				delWorksModalState: false,
				dateParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				showPickerEndDate: false,
				showPickerStartDate: false,
				currentStartDate: '',
				currentEndDate: '',
				id: 0,
				companyname: '',
				jobname: '',
				duty: '',
				duty2:'',
				starttime: '',
				endtime: '',
				endtimeName: '',
				todate: 0,
				minDate: '',
				maxDate: '',
				disabled:false
			}
		},
		onLoad(e) {
			// 获取路由中的id
			this.id = e.id
			if (this.id > 0) {
				// 如果有id，根据id取出对应的工作经历
				let thisWork = this.workStore.filter(
					item => parseInt(item.id) === parseInt(this.id)
				)
				this.initData(thisWork[0])
				// 恢复入职时间和离职时间
				let starTimeDateArr = this.starttime.split('-')
				this.currentStartDate = new Date(
					parseInt(starTimeDateArr[0]),
					parseInt(starTimeDateArr[1]) - 1
				)
				if (!parseInt(this.todate)) {
					// 不是至今恢复离职时间
					let endTimeDateArr = this.endtime.split('-')
					this.currentEndDate = new Date(
						parseInt(endTimeDateArr[0]),
						parseInt(endTimeDateArr[1]) - 1
					)
				}
			}
		},
		mounted() {
			this.initDate()
		},
		computed: {
			workStore() {
				return this.$store.state.resume.work_list
			},
			columnsWage1() {
			  return this.date()
			},
		},
		methods: {
			date() {
			  const nowDate = new Date()
			  const nowYear = nowDate.getFullYear()
			  const minYear = nowYear - 59
			  const yearArr = ['至今']
			  const monthArr = []
			  const monthArr1 = []
			  const arr = []
			  for (let i = 0; i < nowYear - minYear; i++) {
				yearArr.push((nowYear - i) + '年')
			  }
			  for (let j = 0; j < 12; j++) {
				var m = (j + 1) >= 10 ? (j + 1) : '0' + (j + 1)
				monthArr.push({
				  value: m + '月' ,
				  label: m + '月'
				})
				monthArr1.push('')
			  }
			  for (let k = 0; k < yearArr.length; k++) {
				if (yearArr[k] == '至今') {
				  arr.push({
					label: yearArr[k],
					value: yearArr[k],
					children:monthArr1
				  })
				} else {
				  arr.push({
					label: yearArr[k],
					value: yearArr[k],
					children: monthArr
				  })
				}
			  }
			  return arr
			},
			onConfirmWage1(values) {
				// 修改
				if(values[0].label == '至今'){
					this.endtime = ''
					this.endtimeName = '至今'
					this.todate = 1
				} else {
					var y = parseInt(values[0].label) >= 10 ? parseInt(values[0].label) : '0' + parseInt(values[0].label)
					var m = parseInt(values[1].label) >= 10 ? parseInt(values[1].label) : '0' + parseInt(values[1].label)
					this.endtime = y + '-' + m
					this.endtimeName = y + '-' + m
					this.todate = 0
				}
			},
			handleDutyTextarea(){
				if(this.duty2 != ''){
					this.duty = this.duty2
				}
				this.isDutyFucus = !this.isDutyFucus
				this.isDutyTextarea = !this.isDutyTextarea
			},
			// 初始化接口返回数据
			initData(interfaceWork) {
				this.companyname = interfaceWork.companyname
				this.jobname = interfaceWork.jobname
				this.duty = interfaceWork.duty
				this.duty2 = interfaceWork.duty
				this.starttime = this.dateFormat(new Date(interfaceWork.starttime * 1000))
				if (parseInt(interfaceWork.todate)) {
					// 至今
					this.endtime = ''
					this.endtimeName = '至今'
					this.todate = 1
				} else {
					this.endtime = this.dateFormat(new Date(interfaceWork.endtime * 1000))
					this.endtimeName = this.dateFormat(
						new Date(interfaceWork.endtime * 1000)
					)
					this.todate = 0
				}
			},
			// 设置日期插件默认值
			initDate() {
				let nowDate = new Date()
				let nowYear = nowDate.getFullYear()
				let minYear = nowYear - 59

				this.minDate = minYear
				this.maxDate = nowYear
				this.currentStartDate = nowDate
				this.currentEndDate = nowDate
			},
			// 选择入职时间
			onConfirmStartDate(value) {
				this.starttime = value.year + '-' + value.month
				this.showPickerStartDate = !this.showPickerStartDate
			},
			// 选择离职时间
			onConfirmEndDate(value) {
				this.endtime = value.year + '-' + value.month
				this.endtimeName = value.year + '-' + value.month
				this.todate = 0
				this.showPickerEndDate = !this.showPickerEndDate
			},
			// 选择至今
			handleToDateTime() {
				this.endtime = ''
				this.endtimeName = '至今'
				this.todate = 1
				this.showPickerEndDate = !this.showPickerEndDate
			},
			handleInput(e){
				this.duty2 = e.detail.value
			},
			// 保存
			handleSubmit() {
				this.duty = this.duty2
				if (!this.companyname) {
					this.$refs.uTips.show({
						title: '请填写公司名称',
						type: 'error'
					})
					return false
				}
				if (!this.jobname) {
					this.$refs.uTips.show({
						title: '请填写职位名称',
						type: 'error'
					})
					return false
				}
				if (!this.starttime) {
					this.$refs.uTips.show({
						title: '请选择入职时间',
						type: 'error'
					})
					return false
				}
				if (parseInt(this.todate) === 0) {
					if (!this.endtime) {
						this.$refs.uTips.show({
							title: '请选择离职时间',
							type: 'error'
						})
						return false
					}
				}
				if (!this.duty) {
					this.$refs.uTips.show({
						title: '请填写工作职责',
						type: 'error'
					})
					return false
				}
				this.disabled = true
				http
					.post(api.resume_work_save, {
						id: this.id,
						companyname: this.companyname,
						jobname: this.jobname,
						duty: this.duty,
						starttime: this.starttime,
						endtime: this.endtime,
						todate: this.todate
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
								this.duty2 = ''
								this.duty = ''
							}, 1500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
						this.disabled = false
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 删除此条工作经历
			deleteCurrentWork() {
				// 确定按钮
				http
					.post(api.resume_work_delete, {
						id: this.id
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							}, 500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 格式化日期
			dateFormat(time) {
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				return `${year}-${month}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		width: 100%;
		padding: 30rpx 0;
	}
</style>
